<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="colorui/main.css">
    <link rel="stylesheet" type="text/css" href="colorui/icon.css">
    <script type="text/javascript" src="js/webview.js"></script>
    <script type="text/javascript" src="rtc/adapter-latest.js"></script>
    <link rel="stylesheet" type="text/css" href="style/style.css">
    <style>
      body {
        background-color: #000;
        margin: 0;
      }

      .cu-avatar.xl {
        width: 93px;
        height: 93px
      }

      .trtc-bar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
      }

      .trtc-bar .roundicon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        line-height: 60px;
        font-size: 28px;
        position: relative;
        margin: 0 auto
      }

      .trtc-bar .roundicon.rotate {
        -webkit-transform: rotate(125deg);
        transform: rotate(125deg)
      }

      .trtc-bar .roundicon.close::before {
        content: " ";
        width: 2px;
        height: 32px;
        margin-top: -16px;
        background-color: #fff;
        left: 50%;
        top: 50%;
        position: absolute;
        z-index: 100;
        -webkit-transform: rotate(139deg);
        transform: rotate(139deg)
      }

      .trtc-bar .roundicon[class*="line"]::after {
        content: " ";
        display: block;
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid currentColor;
        -webkit-transform: scale(.5);
        transform: scale(.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        box-sizing: border-box;
        border-radius: 50%;
        z-index: 1;
        pointer-events: none
      }
      .grid.col-3>div {
        width: 33.33%;
      }

      .grid.col-1 {
        justify-content: center;
      }

      .padding {
        padding: 15px;
        box-sizing: border-box;
      }

      .margin-top {
        margin-top: 15px;
      }

      .padding-top-sm {
        padding-top: 10px;
      }

      .text-muted {
        color: #e0e0e0;
        font-size: 14px;
      }

      .hidden,
      .noaf::after,
      .nobf::before {
        display: none !important;
      }

      .trtc-bar .roundicon.close::before {
        content: " ";
        width: 2px;
        height: 32px;
        margin-top: -16px;
        background-color: #fff;
        left: 50%;
        top: 50%;
        position: absolute;
        z-index: 100;
        -webkit-transform: rotate(139deg);
        transform: rotate(139deg);
      }

      #remote_stream {
        width: 100vw;
        height: 100vh;
      }

      .col-2 .v-item,
      .col-2 .v-thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: calc(100vw / 2);
        overflow: hidden;
      }

      .col-3 .v-item,
      .col-3 .v-thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: calc(100vw / 3);
        overflow: hidden;
      }
      .v-item {
        position: relative;
      }

      .loader-71,
      .volume {
        position: absolute;
        left: 0;
        bottom: 0;
      }

      .volume {
        width: 100%;
        height: 4.8px;
        display: inline-block;
        background: rgba(0, 0, 0, .1);
        overflow: hidden;
      }

      .volume::after {
        content: "";
        width: 0%;
        height: 4.8px;
        background: #18b566;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .1s;
      }

      .v-voice {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 10px;
        bottom: 10px;
        width: 20px;
        height: 20px;
        font-size: 18px;
        border-radius: 50%;
      }
      .allVoice.close::before {
        content: " ";
        width: 2px;
        height: 22px;
        margin-top: -11px;
        background-color: #fff;
        left: 50%;
        top: 50%;
        position: absolute;
        z-index: 100;
        -webkit-transform: rotate(139deg);
        transform: rotate(139deg);
      }

      .cu-bar .action:last-child {
        margin-right: 15px
      }
	  .padding-ios{
	  		  padding: env(safe-area-inset-top,90px)
	  }
	  .cu-bar{
		  top: 60px;
		  height: 60px;
	  }
	  .video-box{
	  		  padding-top: 60px;
	  }
	  @supports (top: env(safe-area-inset-top)) {
	      .cu-bar{
	          top: 100px;
			  height: 100px;
	      }
		  .video-box{
		  		  padding-top: 90px;
		  }
	  }
	  
    </style>
  </head>
  <body>
    <div class="padding-ios">
      <div class="cu-custom ">
        <div class="cu-bar fixed none-bg text-white bg-img " class="bg-black">
          <div class="content callTime">
            <span>正在呼叫</span>
          </div>
          <div class="text-xl action right margin-right-xl allVoice" onclick="disableVoice()">
            <span class="cuIcon-sound"></span>
          </div>
         <!-- <div class="text-xl action right" onclick="handleInvite('voices')">
            <span class="cuIcon-roundadd"></span>
          </div> -->
        </div>
      </div>
      <div id="remote_stream" class="video-box">
        <div class="grid col-2" id="videos">
          <div class="v-item">
            <div class="v-thumb">
              <img class="my_thumb" src="/static/wallpaper.png" alt="">
            </div>
            <audio id="my_video" autoplay></audio>
            <span class="v-voice text-green cuIcon-voicefill text-shadow"></span>
          </div>
        </div>
      </div>
      <div class="foot trtc-bar">
        <div class="grid col-1 btnGroup">
          <div class="padding text-center hidden voiceBtn" id="voiceBtn" onclick="voiceBtn()">
            <div class="roundicon bg-white voiceBtnIn">
              <span class="cuIcon-voicefill"></span>
            </div>
            <div class="padding-top-sm">
              <span class="text-muted voiceBtnText" id="voiceBtnText">麦克风</span>
            </div>
          </div>
          <div class="padding text-center" id="cancelBtn" onclick="handleOpen()">
            <div class="roundicon bg-red rotate">
              <span class="cuIcon-dianhua"></span>
            </div>
            <div class="padding-top-sm">
              <span class="text-muted"></span>
            </div>
          </div>
          <div class="padding text-center hidden speakBtn" id="speakBtn" onclick="speakBtn()">
            <div class="roundicon bg-white speakBtnIn">
              <span class="cuIcon-notificationfill"></span>
            </div>
            <div class="padding-top-sm">
              <span class="text-muted speakBtnText" id="speakBtnText">听筒</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cu-modal bottom-modal tk-modal">
      <div class="cu-modal-bg" onclick="handleClose()"></div>
      <div class="cu-dialog border-radius-tr">
        <div class="flex justify-between padding-lr-lg">
          <div class="radius padding-sm" onclick="handleQuit()">
            <div class="text-xl">
              <span class="cuIcon-pullleft"></span>
            </div>
            <div class="text-xs">退出会议</div>
          </div>
          <div class="radius padding-sm" onclick="finishBtn()">
            <div class="text-xl">
              <span class="cuIcon-backdelete"></span>
            </div>
            <div class="text-xs">结束会议</div>
          </div>
        </div>
      </div>
    </div>
    <div class="popupover popupoverInvite">
      <div class="popupover-bg"></div>
      <div class="radius popcontainer shadow-blur">
        <div class="cu-list menu">
          <!-- 扫一扫 -->
          <!-- <div class="cu-item" @click="doscan()">
            <div class="content">
              <text class="cuIcon-scan"></text>
              <text>扫一扫</text>
            </div>
          </div> -->
          <div class="cu-item" onclick="invite(1)">
            <div class="content">
              <span class="cuIcon-group"></span>
              <span>邀请当前群</span>
            </div>
          </div>
          <div class="cu-item" onclick="invite(2)">
            <div class="content">
              <span class="cuIcon-addressbook"></span>
              <span>邀请通讯录</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script type="text/javascript" src="config/base.js"></script>
  <script type="text/javascript" src="config/config-group.js"></script>
  <script type="text/javascript" src="js/jsonly.js"></script>
  <script>
    window.addEventListener('message', (e) => {
      if (e.data['groupAdd'] === 'groupAdd') {
        addGroup = e.data['message']
        updateAddInfo('voice')
        beginTime(addGroup, 0)
        return
      }
      callMessagecallback(e)
    }, false);
    window.getUniAppMessage = (arg) => {
      console.log('网页接收到消息')
      const data = {
        data: jsonly(arg)
      }
      if (data.data['groupAdd'] === 'groupAdd') {
        addGroup = data.data['message']
        // console.log('打印内部消息')
        // console.log(addGroup)
        updateAddInfo('voice')
        beginTime(addGroup, 0)
        return
      }
      callMessagecallback(data)
    }

    function callVoice() {
      navigator.mediaDevices.getUserMedia({
        video: false,
        audio: true
      }).then((mediastream) => {
        console.log('本地音频')
        localStream = mediastream
        stream[getQueryVariable('id')] = mediastream
        volumeWave(mediastream, getQueryVariable('id'))
        let group = JSON.parse(decodeURIComponent(getQueryVariable('group')))
        beginTime(group, 0)
      }).catch((e) => {});
    }
    callVoice()

    function callMessagecallback(e) {
      if (e.data && e.data['acceptRtc'] === "acceptRtc") {
        // 同意接电话
        const message = isJSON(e.data['message'])
        window.pc[message.sender] = new RTCPeerConnection(config); // rtc
        window.pc[message.sender].ontrack = (event) => {
          if (!callFlag) {
            callFlag = true
            startTime()
          }
          removeAllClass('voiceBtn', 'hidden')
          removeAllClass('speakBtn', 'hidden')
          removeAllClass('btnGroup', 'col-1')
          addAllClass('btnGroup', 'col-3')
          $('.loader_' + message.sender).addClass('hidden')
          $('.v-modal_' + message.sender).addClass('hidden')
          $('.v-voice_' + message.sender).addClass('text-green')
          $('.v-voice_' + message.sender).removeClass('text-gray')
          $('.v-status_' + message.sender).addClass('hidden')
          stream[message.sender] = event.streams[0]
          volumeWave(event.streams[0], message.sender)
          document.getElementById('my_video_' + message.sender).srcObject = event.streams[0]
        }
        window.pc[message.sender].onicecandidate = (event) => {
          // 监听ice
          var iceCandidate = event.candidate;
          if (iceCandidate) {
            postMsg({
              iceCandidate: 'iceCandidate',
              candidate: JSON.parse(JSON.stringify(iceCandidate)),
              message: message
            }, '*');
          }
        };
        localStream.getTracks().forEach(track => window.pc[message.sender].addTrack(track, localStream));
        createOffer(message)
      }
      if (e.data && e.data['answer'] === "answer") {
        // console.log('同步answer信息...')
        //同步answer信息...
        const message = isJSON(e.data['message'])
        setRemoteDescriptionAnswer(e.data['sdp'], message)
      }
      if (e.data && e.data['transmitIce'] === "transmitIce") {
        // 添加ice
        const message = isJSON(e.data['message'])
        if (typeof(e.data['iceCandidate']) === 'object') {
          addIceCandidate(e.data['iceCandidate'], message)
        } else {
          addIceCandidate(isJSON(e.data['iceCandidate']), message)
        }
      }
      if (e.data && e.data['busyCall'] === "busyCall") {
        // 对方忙线
        console.log('对方忙线')
        const message = isJSON(e.data['message'])
        stream[message.sender] = true
        busyCall(() => {
          $('.v-status_' + message.sender).removeClass('hidden')
          $('.v-status_' + message.sender).text('设备忙')
          $('.loader_' + message.sender).addClass('hidden')
          $('.v-modal_' + message.sender + ' .cuIcon-phone').removeClass('hidden')
          window.pc[message.sender] && window.pc[message.sender].close()
          // delete window.pc[message.sender]
        }, 1)
      }
      if (e.data && e.data['rejectCall'] === "rejectCall") {
        // 拒绝通话
        const message = isJSON(e.data['message'])
        stream[message.sender] = true
        rejectCall(() => {
          $('.v-status_' + message.sender).removeClass('hidden')
          $('.v-status_' + message.sender).text('已拒绝')
          $('.loader_' + message.sender).addClass('hidden')
          $('.v-modal_' + message.sender + ' .cuIcon-phone').removeClass('hidden')
          window.pc[message.sender] && window.pc[message.sender].close()
          // delete window.pc[message.sender]
        }, 1)
      }
      if (e.data && e.data['handleUp'] === "handleUp") {
        // 解散通话
        const message = isJSON(e.data['message'])
        let group = JSON.parse(decodeURIComponent(getQueryVariable('group')))
        hangupAction(() => {
          Object.keys(group).forEach(key => {
            window.pc[key] && window.pc[key].close()
            delete window.pc[key]
          })
        }, 1)
      }
      if (e.data && e.data['quitRtc'] === "quitRtc") {
        // 退出通话
        const message = isJSON(e.data['message'])
        quitRtc(() => {
          $('.v-status_' + message.sender).removeClass('hidden')
          $('.v-status_' + message.sender).text('已离开')
          $('.loader_' + message.sender).addClass('hidden')
          $('.v-modal_' + message.sender).removeClass('hidden')
          $('.v-voice_' + message.sender).removeClass('text-green')
          $('.v-voice_' + message.sender).addClass('text-gray')
          $('.v-modal_' + message.sender + ' .cuIcon-phone').removeClass('hidden')
          window.pc[message.sender] && window.pc[message.sender].close()
          // delete window.pc[message.sender]
        }, 1)
      }
      if (e.data && e.data['voiceSwitch'] === "voiceSwitch") {
        // 切换音频状态
        const message = isJSON(e.data['message'])
        if (message.content === 'true') {
          $('.v-voice_' + message.sender).removeClass('text-gray')
          $('.v-voice_' + message.sender).addClass('text-green')
        } else {
          $('.v-voice_' + message.sender).removeClass('text-green')
          $('.v-voice_' + message.sender).addClass('text-gray')
        }
      }
    }
    window.onload = () => {
      const speakBtnText = document.getElementById('speakBtnText')
      if (getQueryVariable('platform') === 'h5') {
        speakBtnText.innerHTML = '听筒'
      }
      if (getQueryVariable('platform') === 'app') {
        speakBtnText.innerHTML = '扬声器'
      }
      updateGroupsInfo()
    }
  </script>
</html>
